import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { StarOutline, CheckOutline } from 'antd-mobile-icons'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'
import { Avatar, Button } from 'antd-mobile'

function DoctorSchedule() {
  const navigate = useNavigate()
  
  // 医生信息
  const [doctorInfo] = useState({
    id: 1,
    name: '刘医生',
    title: '主任医师',
    department: '门诊外一科',
    hospital: '四川省保健院南苑',
    avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.WJlM1ncsKLaS1d99La0ErwHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
    rating: 5.0,
    specialty: '肛肠外科(肛肠良性基本),结直肠微创手术,熟悉结直肠肿瘤的外科及多学科综合治疗,主要从事结肠癌和直...',
    announcement: '谢谢',
    registrationFee: 20.00
  })

  // 排班数据
  const [schedules] = useState([
    {
      id: 1,
      date: '2020-01-27',
      dayOfWeek: '周一',
      timeSlot: '上午',
      remaining: 5,
      isToday: true,
      isAvailable: true
    },
    {
      id: 2,
      date: '2020-01-27',
      dayOfWeek: '周一',
      timeSlot: '下午',
      remaining: 15,
      isToday: true,
      isAvailable: true
    },
    {
      id: 3,
      date: '2020-01-28',
      dayOfWeek: '周二',
      timeSlot: '上午',
      remaining: 10,
      isToday: false,
      daysLater: 1,
      isAvailable: true
    },
    {
      id: 4,
      date: '2020-01-28',
      dayOfWeek: '周二',
      timeSlot: '下午',
      remaining: 0,
      isToday: false,
      daysLater: 1,
      isAvailable: false
    },
    {
      id: 5,
      date: '2020-01-29',
      dayOfWeek: '周三',
      timeSlot: '上午',
      remaining: 10,
      isToday: false,
      daysLater: 2,
      isAvailable: true
    }
  ])

  // 推荐医生
  const [recommendedDoctors] = useState([
    {
      id: 1,
      name: '杨医生',
      title: '副主任医师',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.cCFSMoG5pMWORIqK5dy2eQHaHa?w=200&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2'
    },
    {
      id: 2,
      name: '章医生',
      title: '副主任医师',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.I9E3NywN6414d-eNHE-wVQHaHZ?w=177&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2'
    },
    {
      id: 3,
      name: '李医生',
      title: '主治医师',
      avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.rtCx4EWH5sqN-b4A3CgC7QHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2'
    }
  ])

  // 患者评价
  const [patientReviews] = useState([
    {
      id: 1,
      patientName: '张**',
      rating: 5,
      reviewText: '医生非常的耐心！服务态度很好，解释得很详细，非常专业。',
      reviewTime: '2024-01-15',
    },
    {
      id: 2,
      patientName: '李**',
      rating: 5,
      reviewText: '谢谢医生，麻烦您啦！治疗效果很好，恢复得很快。',
      reviewTime: '2024-01-10',
    },
    {
      id: 3,
      patientName: '王**',
      rating: 4,
      reviewText: '医生很负责任，问诊很仔细，给了很多有用的建议。',
      reviewTime: '2024-01-08',
    }
  ])


  const handleBookAppointment = (scheduleId: number) => {
    console.log('预约排班:', scheduleId)
    // 获取选中的排班信息
    const selectedSchedule = schedules.find(schedule => schedule.id === scheduleId)
    if (selectedSchedule) {
      // 跳转到确认预约页面，通过地址栏传递价格参数
      navigate(`/appointment_confirm/${doctorInfo.registrationFee}`, {
        state: {
          doctorId: doctorInfo.id,
          doctorName: doctorInfo.name,
          doctorTitle: doctorInfo.title,
          department: doctorInfo.department,
          hospital: doctorInfo.hospital,
          doctorAvatar: doctorInfo.avatar,
          appointmentDate: selectedSchedule.date,
          appointmentTime: selectedSchedule.timeSlot === '上午' ? '08:30-12:00' : '14:00-17:30',
          timeSlot: selectedSchedule.timeSlot,
          registrationFee: doctorInfo.registrationFee
        }
      })
    }
  }

  const handleFollowDoctor = () => {
    console.log('关注医生')
    // 这里可以处理关注逻辑
  }

  const handleViewAllSchedules = () => {
    console.log('查看全部排班')
    // 这里可以展开更多排班信息
  }

  const handleRecommendedDoctorClick = (doctorId: number) => {
    navigate(`/doctor_schedule/${doctorId}`)
  }

  return (
    <div className={styles.page}>
      <Nabar title='医生排班' sticky={false} />
      
      <div className={styles.content}>
        {/* 医生信息卡片 */}
        <div className={styles.doctorCard}>
          <div className={styles.doctorHeader}>
            <Avatar src={doctorInfo.avatar} className={styles.doctorAvatar} />
            <div className={styles.doctorInfo}>
              <div className={styles.doctorNameRow}>
                <span className={styles.doctorName}>{doctorInfo.name}</span>
                <span className={styles.doctorTitle}>{doctorInfo.title}</span>
              </div>
              <div className={styles.doctorDepartment}>{doctorInfo.department}</div>
              <div className={styles.doctorHospital}>{doctorInfo.hospital}</div>
            </div>
            <div className={styles.doctorActions}>
              <div className={styles.rating}>
                <StarOutline className={styles.starIcon} />
                <span className={styles.ratingText}>{doctorInfo.rating}</span>
              </div>
              <Button 
                size='small' 
                color='primary' 
                className={styles.followBtn}
                onClick={handleFollowDoctor}
              >
                关注
              </Button>
            </div>
          </div>
          
          <div className={styles.specialtySection}>
            <div className={styles.specialtyLabel}>擅长:</div>
            <div className={styles.specialtyText}>
              {doctorInfo.specialty}
              <span className={styles.moreLink}>更多</span>
            </div>
          </div>
          
          <div className={styles.announcementSection}>
            <div className={styles.announcementIcon}>
              <CheckOutline />
            </div>
            <div className={styles.announcementLabel}>医生公告</div>
            <div className={styles.announcementText}>{doctorInfo.announcement}</div>
          </div>
        </div>

        {/* 排班信息 */}
        <div className={styles.scheduleSection}>
          <div className={styles.scheduleHeader}>
            <span className={styles.departmentName}>{doctorInfo.department}</span>
            <span className={styles.registrationFee}>挂号费: ¥{doctorInfo.registrationFee.toFixed(2)}</span>
          </div>
          
          <div className={styles.scheduleList}>
            {schedules.map((schedule) => (
              <div key={schedule.id} className={styles.scheduleItem}>
                <div className={styles.scheduleInfo}>
                  <div className={styles.scheduleDate}>
                    {schedule.date} {schedule.dayOfWeek} {schedule.timeSlot}
                  </div>
                  <div className={styles.remainingSlots}>
                    余{schedule.remaining}号
                  </div>
                </div>
                <div className={styles.scheduleActions}>
                  <div className={styles.timeInfo}>
                    {schedule.isToday ? '今日' : `${schedule.daysLater}天后`}
                  </div>
                  <Button
                    size='small'
                    color={schedule.isAvailable ? 'primary' : 'default'}
                    disabled={!schedule.isAvailable}
                    className={styles.bookBtn}
                    onClick={() => handleBookAppointment(schedule.id)}
                  >
                    {schedule.isAvailable ? '预约' : '已约满'}
                  </Button>
                </div>
              </div>
            ))}
          </div>
          
          <div className={styles.viewAllSchedules} onClick={handleViewAllSchedules}>
            全部排班√
          </div>
        </div>

        {/* 推荐医生 */}
        <div className={styles.recommendedSection}>
          <div className={styles.recommendedTitle}>同科室有号医生推荐</div>
          <div className={styles.recommendedList}>
            {recommendedDoctors.map((doctor) => (
              <div 
                key={doctor.id} 
                className={styles.recommendedDoctor}
                onClick={() => handleRecommendedDoctorClick(doctor.id)}
              >
                <Avatar src={doctor.avatar} className={styles.recommendedAvatar} />
                <div className={styles.recommendedInfo}>
                  <div className={styles.recommendedName}>{doctor.name}</div>
                  <div className={styles.recommendedTitle}>{doctor.title}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 患者评价 */}
        <div className={styles.reviewSection}>
          <div className={styles.reviewTitle}>患者评价</div>
          <div className={styles.reviewList}>
            {patientReviews.map((review) => (
              <div key={review.id} className={styles.reviewItem}>
                <div className={styles.reviewHeader}>
                  <div className={styles.patientInfo}>
                    <div className={styles.patientName}>{review.patientName}</div>
                    <div className={styles.reviewTime}>{review.reviewTime}</div>
                  </div>
                  <div className={styles.rating}>
                    {[...Array(5)].map((_, index) => (
                      <StarOutline 
                        key={index} 
                        className={`${styles.star} ${index < review.rating ? styles.starFilled : ''}`}
                      />
                    ))}
                  </div>
                </div>
                <div className={styles.reviewText}>{review.reviewText}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default DoctorSchedule
